<template>
  <li @click="$emit('onScoreClick', idx)">
    <p>{{scoreItem.name}}</p>
    <section>{{scoreItem.desc}}</section>
    <h5 :style="{color: getColor(scoreItem.score)}"><span>{{scoreItem.score}}</span> {{scoreItem.score | numToStr}}</h5>
  </li>
</template>

<script>
export default {
  props: {
    scoreItem: {
      type: Object,
      default: () => {}
    },
    idx: {
      type: Number
    }
  },

  methods: {
    getColor (val) {
      let color = ''
      if (val > 0 && val <= 2.5) {
        color = 'RGBA(218, 38, 85, 1)'
      } else if (val > 2.5 && val <= 5) {
        color = 'RGBA(31, 100, 186, 1)'
      } else if (val > 5 && val <= 7.5) {
        color = 'RGBA(210, 156, 0, 1)'
      } else {
        color = 'RGBA(0, 200, 122, 1)'
      }
      return color
    }
  },

  filters: {
    numToStr (val) {
      let str = ''
      if (val > 0 && val <= 2.5) {
        str = '差'
      } else if (val > 2.5 && val <= 5) {
        str = '中'
      } else if (val > 5 && val <= 7.5) {
        str = '良'
      } else {
        str = '优'
      }
      return str
    }
  }
}
</script>

<style lang="less" scoped>
li {
  width: 220px;
  box-sizing: border-box;
  padding: 16px 10px;
  background: rgba(245, 245, 245, 0.03);
  border: 1px solid #BBBBBB;
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.07);
  margin-left: 30px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.6;
  color: #fff;
  min-height: 212px;
  cursor: pointer;
  &.active {
    opacity: 1;
  }
  &.item-0 {
    margin-left: 0;
  }
  p {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
  }
  section {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 8px;
  }
  h5 {
    margin-top: auto;
    span {
      font-size: 32px;
      font-weight: 500;
    }
  }
}
</style>
